<template>

  <el-form ref="editForm" :model="form" label-width="80px" @submit.prevent="onSubmit"
           style="margin:20px;width:60%;min-width:600px;">

    <el-form-item label="攻略图片">
      <div class="p-pic">
        <div class="p-pic-old">
          <el-form-item>
            <el-input type="text" v-model="form.descimg" auto-complete="off" width="80px" readonly></el-input>
            <el-input type="hidden" v-model="form.id" auto-complete="off" width="80px"></el-input>
          </el-form-item>
        </div>
        <div class="p-pic-upload">
          <el-button type="success">上传<i class="el-icon-upload el-icon--right"></i></el-button>
          <span class="upload_plant_pic"><input type="file" name="file" class="cfg_upload_pic" @change="upInputOnchange"></span>
        </div>
        <div class="p-poster"  v-if="form.descimg">
          <el-form-item>
            <img :src="form.descimg" alt="">
          </el-form-item>
        </div>
      </div>

    </el-form-item>

    <el-form-item label="攻略标题">
      <el-input type="text" v-model="form.title" auto-complete="off" width="80px"></el-input>
    </el-form-item>

    <el-form-item label="攻略置顶">
      <el-checkbox-group v-model="form.top">
        <el-checkbox label="攻略置顶" name="form.top"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <el-form-item label="攻略简介">
      <el-input type="textarea" v-model="form.desc" :autosize="{ minRows: 5, maxRows: 9}"></el-input>
    </el-form-item>

    <el-form-item label="攻略详情">
      <editer ref="editer" :content="content"></editer>
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click.native="edit">立即编辑</el-button>
      <el-button @click.native.prevent>取消</el-button>
      <el-button type="primary" @click.native="_writed">写入信息</el-button>
    </el-form-item>

  </el-form>

</template>

<script type="text/ecmascript-6">
  import util from '../../util'
  import { apiTree } from '../../apiTree'
  import NProgress from 'nprogress'
  import editer from '../common/ueditor.vue'
  import { returnEditerHtml } from '../../vuex/getters'

  export default {
    components: {
      editer
    },
    data() {
      return {
        form: {
          descimg: '',
          title: '',
          desc: '',
          detail: '',
          id: ''
        },
        fileList: [],
        content: ''
      }
    },
    methods: {
      // 上传种子照片
      upInputOnchange(e) {
        var _that = this
        let file = e.target.files[0]
        let _reader = new FileReader()
        _reader.readAsDataURL(file)
        _reader.onload = function() {
          let _file = this.result
          let param = {'file': _file, 'type': 3}
          apiTree('upload', 'plant/upload', param, 'POST').then((res) => {
            if (res.s === 1) {
              _that.form.descimg = res.d.url
            }
          })
        }
      },
      edit: function () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            NProgress.start()
            let para = Object.assign({}, this.form)
            this.$refs.editer.$emit('getUeditorContent');
            para.detail = returnEditerHtml(this.$store.state)
            if (util.isEmpty(para.detail)) {
              this.$message.error('内容为空');
              return
            }
            if (util.isEmpty(para.title)) {
              this.$message.error('标题为空');
              return
            }
            if (util.isEmpty(para.desc)) {
              this.$message.error('描述为空');
              return
            }
            if (util.isEmpty(para.descimg) || !util.isHttp(para.descimg)) {
              this.$message.error('攻略图片错误');
              return
            }
            apiTree('strategy/index', 'strategy/edit', para, 'POST').then((res) => {
              NProgress.done()
              this.$message({
                message: '提交成功',
                type: 'success'
              })
              this.$refs['editForm'].resetFields()
              this.$router.push('/strategy/index')
            })
          }
        })
      },
      editList: function () {
        let param = {'id': this.$route.params.id}
        apiTree('strategy/index', 'strategy/editList', param).then((res) => {
          this.form = res.d.data
          if (res.d.data.top > 0) {
            this.form.top = true
          } else {
            this.form.top = false
          }
          this.content = res.d.data.detail
        })
      },
      _writed() {
        this.$refs.editer.$emit('setUeditorContent')
      }
    },
    created() {
      this.editList()
    },
    mounted() {
      let that = this
      setTimeout(function(){
        that.$refs.editer.$emit('setUeditorContent')
      }, 400)
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  img
    width: 100%
    height: 100%
  .p-pic
    overflow hidden
    .p-pic-old
      width 430px
      display inline-block
    .p-poster
      width 200px
      height 100px
      overflow hidden
      & img
        width 100%
        height 100%
    .p-pic-upload
      display inline-block
      margin-right 300px
      float: right
      overflow: hidden
      .upload_plant_pic
        display block
        width 80px
        height 35px
        cursor pointer
        float: right
        top 0px
        left 0px
        opacity 0
        & input[type=file]
          display block
          cursor pointer
          width 80px
          height 35px
</style>
